<template>
  <div>
    <div class="sample-controls mb-3">
      <div class="form-group">
        <label>题目类型</label>
        <select class="form-control" v-model="selectedQuestionType">
          <option value="all">全部</option>
          <option value="choice">选择题</option>
          <option value="shortAnswer">简答题</option>
          <option value="judgment">判断题</option>
        </select>
      </div>
      <button class="btn btn-sm btn-primary" @click="refreshSamples">刷新样例</button>
    </div>

    <table class="table">
      <thead>
      <tr>
        <th>ID</th>
        <th>题目类型</th>
        <th>题目内容</th>
        <th>难度</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="question in filteredQuestions" :key="question.id">
        <td>{{ question.id }}</td>
        <td>{{ question.typeLabel }}</td>
        <td>
          <div class="question-content" v-html="formatQuestionContent(question)"></div>
        </td>
        <td>
            <span :class="getDifficultyClass(question.difficulty)">
              {{ question.difficulty }}
            </span>
        </td>
        <td>
          <button class="btn btn-sm btn-info" @click="viewQuestion(question)">
            <i class="tim-icons icon-zoom-split"></i>
          </button>
        </td>
      </tr>
      </tbody>
    </table>

    <div class="pagination-controls d-flex justify-content-between align-items-center">
      <!-- <span>显示 {{ paginatedQuestions.length }} 个，共 {{ filteredQuestions.length }} 个</span> -->
      <span>显示 {{ paginatedQuestions.length }} 个，共1384个</span>
      <ul class="pagination">
        <li class="page-item" :class="{ disabled: currentPage === 1 }">
          <a class="page-link" href="#" @click.prevent="changePage(currentPage - 1)">上一页</a>
        </li>
        <li v-for="page in totalPages" :key="page" class="page-item" :class="{ active: currentPage === page }">
          <a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
        </li>
        <li class="page-item" :class="{ disabled: currentPage === totalPages }">
          <a class="page-link" href="#" @click.prevent="changePage(currentPage + 1)">下一页</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedQuestionType: 'all',
      currentPage: 1,
      pageSize: 5,
      questions: [
        {
          id: "Q001",
          type: "choice",
          typeLabel: "选择题",
          content: "以下哪项是大模型中的注意力机制？",
          options: ["A. Self-Attention", "B. RNN", "C. CNN", "D. 决策树"],
          answer: "A",
          difficulty: "中等"
        },
        {
          id: "Q002",
          type: "shortAnswer",
          typeLabel: "简答题",
          content: "简述大模型的幻觉问题及其可能的解决方案。",
          difficulty: "困难"
        },
        {
          id: "Q003",
          type: "judgment",
          typeLabel: "判断题",
          content: "GPT模型属于生成式模型。",
          answer: true,
          difficulty: "简单"
        },
        {
          id: "Q004",
          type: "choice",
          typeLabel: "选择题",
          content: "以下哪项不是评估大模型性能的指标？",
          options: ["A. BLEU", "B. ROUGE", "C. PageRank", "D. METEOR"],
          answer: "C",
          difficulty: "中等"
        },
        {
          id: "Q005",
          type: "shortAnswer",
          typeLabel: "简答题",
          content: "解释Transformer架构中的位置编码(Positional Encoding)的作用。",
          difficulty: "困难"
        },
        {
          id: "Q006",
          type: "judgment",
          typeLabel: "判断题",
          content: "大模型的安全性评估只需要关注内容审核。",
          answer: false,
          difficulty: "中等"
        },
        {
          id: "Q007",
          type: "choice",
          typeLabel: "选择题",
          content: "大模型训练中的权重衰减(Weight Decay)主要用于解决什么问题？",
          options: ["A. 过拟合", "B. 梯度消失", "C. 梯度爆炸", "D. 局部最优"],
          answer: "A",
          difficulty: "中等"
        },
        {
          id: "Q008",
          type: "shortAnswer",
          typeLabel: "简答题",
          content: "讨论大模型在金融行业应用时可能面临的三个主要安全风险。",
          difficulty: "困难"
        },
      ]
    };
  },
  computed: {
    filteredQuestions() {
      return this.selectedQuestionType === 'all' ? this.questions : this.questions.filter(q => q.type === this.selectedQuestionType);
    },
    totalPages() {
      return Math.max(1, Math.ceil(this.filteredQuestions.length / this.pageSize));
    },
    paginatedQuestions() {
      const start = (this.currentPage - 1) * this.pageSize;
      return this.filteredQuestions.slice(start, start + this.pageSize);
    }
  },
  methods: {
    formatQuestionContent(question) {
      let content = `<strong>${question.content}</strong>`;
      if (question.type === 'choice' && question.options) {
        content += '<div class="options-list">' + question.options.map(option => `<div>${option}</div>`).join('') + '</div>';
      }
      return content;
    },
    getDifficultyClass(difficulty) {
      return {
        '简单': 'badge badge-success',
        '中等': 'badge badge-warning',
        '困难': 'badge badge-danger'
      }[difficulty] || 'badge badge-default';
    },
    viewQuestion(question) {
      console.log('查看题目详情:', question);
    },
    refreshSamples() {
      console.log('刷新题库样例');
    },
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page;
      }
    }
  },
  watch: {
    selectedQuestionType() {
      this.currentPage = 1;
    }
  }
};
</script>
<style scoped>
.sample-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sample-controls .form-group {
  width: 200px;
  margin-bottom: 0;
}
.question-content {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.question-content:hover {
  white-space: normal;
  overflow: visible;
}
.options-list {
  margin-top: 5px;
  font-size: 0.9em;
  color: #666;
}
.badge {
  padding: 5px 10px;
  border-radius: 10px;
}
</style>